<template>
		<el-row >
		  <el-col :span='12' align='left'>
		  	金融资产交易系统
		  </el-col>
		  <el-col :span="7" :offset="5">
		  		<el-dropdown @command="handleCommand" v-if='username!=""'>
                      <span  class='nowrap'> 
                          <el-badge :value="messageNum" :max="99" class="item"  :hidden='messageNum>0? false:true'  >
    		            	    <i class="el-icon-s-custom"></i> 
                            {{ username }}
                            </el-badge>
                      </span>
      		          <el-dropdown-menu slot="dropdown">
      		            <el-dropdown-item command="personalInfo">
                        
                        <el-badge :is-dot='messageNum>0? true:false' class="item ">
                            <i class="el-icon-message"></i>我的消息
                        </el-badge>
                      
                      </el-dropdown-item>
      		            <el-dropdown-item command="modifyPass"><i class="el-icon-lock"></i>修改密码</el-dropdown-item>
                      <el-dropdown-item command="logout"  v-if='isDing=="notInDingTalk"'><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
      		          </el-dropdown-menu>
		      </el-dropdown>
		      <router-link  to='/login'  v-else><el-button type="primary" round >登录</el-button></router-link>

		        
		  </el-col>
      <!-- 我的消息查看 -->
      <MyMessage ref='message_list'></MyMessage>
      <!-- 修改密码 -->
      <ModifyPass ref='modify_pass'></ModifyPass>
		</el-row>
</template>

<script >
import { mapGetters } from 'vuex'
//components
import  MyMessage  from  '@/components/homework/index'//我的消息查看
import  ModifyPass  from  '@/components/homework/ModifyPass'//修改密码

// import * as ddenv from 'dingtalk-jsapi/lib/env' //按需加载 dd.env.platform 

export default {
  name: 'Header',
  data () {
    // let isDing = ddenv.getENV().platform
    return {
      // username:''
      // isDing:ddenv.getENV().platform,
      isDing:dd.env.platform
    }
  },
  created(){
    
  },
  methods:{
  	handleCommand(command) {
      switch(command) { 
        case 'logout':
          sessionStorage.clear()
          /*是否可以找个方法优化*/
          this.$store.commit('setusername','')
          this.$store.commit('setbreadcrumbItems',[])
          this.$store.commit('setmessageNum','')
          this.$store.commit('setbutton_limit',[])
          this.$store.commit('setroleNames','')
          this.$store.commit('setisMobile',false)
          this.$store.commit('setheadershow',false)
          this.$store.commit('setcacheRoute',[])

          this.$router.push('/login')
          // 模拟f5刷新，避免出现Duplicate named routes definition警告。
          this.$router.go(0)
          break
        case 'modifyPass' : 
          this.$refs.modify_pass.$emit('openDialog')
          break
        case 'personalInfo':
          this.$refs.message_list.$emit('openDialog')
      }
    },
  },
  
  computed:{
    ...mapGetters(['username','messageNum'])
  },
  components:{
    MyMessage,
    ModifyPass
  }
}
</script>

<style >
.el-dropdown:hover{cursor: pointer;}

.el-badge__content.is-fixed:nth-child(2){top:15px;right:0;}
</style>